<template>
  <el-dialog
    :title="title"
    :visible.sync="innerVisible"
    width="1500px"
    @close="handleCancel"
    v-loading="loading"
  >
    <div class="table-wrap">
      <div class="search_header">
        <div class="search_header_left">
          勾选标段关联的项目
        </div>
        <div class="search_header_right">
          <el-input
            placeholder="请输入项目名称、业主"
            v-model="parameter.keywords"
            @keydown.enter.native="search"
            clearable
          >
            <span
              @click="search"
              slot="suffix"
              style="display: inline-block"
            >
              <Icon
                title="搜索"
                name="sousuo"
                color="#A7ADB5"
                font-size="20"
              />
            </span>
          </el-input>
        </div>
      </div>

      <el-table
        :data="projectList"
        :header-cell-style="{
          background: '#F2F6FB',
          color: ' #6B767D'
        }"
        :row-class-name="tableRowClassName"
        ref="singleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="项目名称"
          width="300"
        >
        </el-table-column>
        <el-table-column
          prop="code"
          label="项目编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="项目详细地址"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ownerUnit"
          label="业主(建设单位)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="buildContentScale"
          label="建设内容及规模"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="fundBuildSource"
          label="资金来源"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="buildStage"
          label="项目建设阶段"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="projectBusinessType"
          label="项目类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="projectBusinessDepartType"
          label="项目类型Ⅱ"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="table-pagination" v-if="total">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="parameter.pageSize"
        @current-change="pageChange"
        :total="total"
      >
      </el-pagination>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { queryConstructionProject } from '@/api/dataManagement'
import Icon from '@/components/icon'

export default {
  name: 'ProgressDialog',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '填写信息'
    },
    modelValue: {
      type: Object,
      default: () => ({})
    },
    pkid: {
      type: String,
      default: ''
    }
    // tableData: {
    //   type: Array
    // }
  },
  components: {
    Icon
  },
  data() {
    return {
      form: {
        stage: '',
        src: 'lalal',
        imageList: [
          {
            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
          }
        ]
      },
      rules: {},
      options: [
        {
          label: '选项1',
          value: 1
        }
      ],
      dialogImageVisible: false,
      dialogImageUrl: '',
      fileList: [],
      innerVisible: false,
      parameter: {
        keywords: '',
        pageIndex: 1,
        pageSize: 10
      },
      projectList: [],
      loading: false,
      total: 0,
      select: '',
      selectedRow: null
    }
  },
  watch: {
    visible(val) {
      this.innerVisible = val
      this.getList()
      if (!this.innerVisible) {
        this.parameter.keywords = ''
        this.parameter.pageIndex = 1
        this.parameter.pageSize = 10
      }
    },
    innerVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      if (this.selectedRow && this.selectedRow.pkid) {
        this.$emit('confirm', { ...this.selectedRow })
        this.handleCancel()
      } else {
        this.$message.warning('请至少绑定一个项目')
      }
    },
    handleChange() {},
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.select = selection[selection.length - 1]
        this.$refs.singleTable.clearSelection()
        this.$nextTick(() => {
          this.$refs.singleTable.toggleRowSelection(
            this.select,
            true
          )
        })
      }

      this.selectedRow = selection[0] || null
    },
    search() {
      this.parameter.pageIndex = 1
      this.getList()
    },
    getList() {
      this.loading = true
      queryConstructionProject(this.parameter).then(
        (res) => {
          if (res.success) {
            this.total = res.data.count
            this.projectList = res.data.list
          }
          this.loading = false
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/dialog.scss';
@import '~@/assets/css/table.scss';
.el-select {
  width: 320px;
}

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;
}

::v-deep
  .el-upload-list--picture-card
  .el-upload-list__item {
  width: 100px;
  height: 100px;
}
</style>
